<template>
  <div class="shean">
     <div class="content">
        <van-tabs v-model="activeName" @click="tabChange">
          <van-tab title="可移动文物鉴定" :name="1" >
            <van-form validate-first @submit="onSubmit">
              <div class="vant-form">
                  <van-field
                    v-model="queryInfo.unit"
                    name="申报单位"
                    label="申报单位"
                    placeholder="请输入申报单位"
                    :colon="true"
                    :rules="[{ required: true, message: '请填写申报单位' }]"
                  />
                  <van-field
                    v-model="queryInfo.describe"
                    type="textarea"
                    :rows="1"
                    name="案情简述"
                    label="案情简述"
                    placeholder="请输入案情简述"
                    :colon="true"
                    autosize
                    :rules="[{ required: true, message: '请输入案情简述' }]"
                  />
                  <van-field
                    v-model="queryInfo.amount"
                    name="器物数量"
                    label="器物数量"
                    placeholder="请输入器物数量"
                    :colon="true"
                    :rules="[{ required: true, message: '请填写器物数量' }]"
                  />
                  <van-field name="fileList" label="总图上传">
                    <template #input>
                      <van-uploader v-model="fileList"  :max-size="5 * 1024 * 1024"  :max-count="1"  @oversize="onOversize" :after-read="afterRead"/>
                    </template>
                  </van-field>
                  <van-field
                    v-model="queryInfo.name"
                    name="联系人"
                    label="联系人"
                    placeholder="请输入联系人"
                    :colon="true"
                    :rules="[{ required: true, message: '请填写联系人' }]"
                  />
                  <van-field
                    v-model="queryInfo.phone"
                    type="number"
                    name="联系电话"
                    label="联系电话"
                    placeholder="请输入联系电话"
                    :colon="true"
                    :rules="[{ validator:phoneValidator,required: true, message: '请输入正确的电话号' }]"
                  />
                </div>
                <div class="confirm-btn">
                  <van-button round type="info" native-type="submit">提交</van-button>
                </div>
              </van-form>
          </van-tab>
          <van-tab title="不可移动文物鉴定" :name="2" >
             <van-form validate-first @submit="onSubmit">
              <div class="vant-form">
                  <van-field
                    v-model="queryInfo.unit"
                    name="申报单位"
                    label="申报单位"
                    placeholder="请输入申报单位"
                    :colon="true"
                    :rules="[{ required: true, message: '请填写申报单位' }]"
                  />
                  <van-field
                    v-model="queryInfo.describe"
                    type="textarea"
                    :rows="1"
                    name="案情简述"
                    label="案情简述"
                    placeholder="请输入案情简述"
                    :colon="true"
                    autosize
                    :rules="[{ required: true, message: '请输入案情简述' }]"
                  />
                  <van-field name="radio" label="是否进行勘探或认证" :colon="true">
                    <template #input>
                      <van-radio-group v-model="queryInfo.state" direction="horizontal" class="radio-box" @change="radioChange">
                        <van-radio :name="1">是</van-radio>
                        <van-radio :name="0">否</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                  <van-field
                    v-model="queryInfo.name"
                    name="联系人"
                    label="联系人"
                    placeholder="请输入联系人"
                    :colon="true"
                    :rules="[{ required: true, message: '请填写联系人' }]"
                  />
                  <van-field
                    v-model="queryInfo.phone"
                    type="number"
                    name="联系电话"
                    label="联系电话"
                    placeholder="请输入联系电话"
                    :colon="true"
                    :rules="[{ validator:phoneValidator,required: true, message: '请输入正确的电话号码' }]"
                  />
                </div>
                <div class="confirm-btn">
                  <van-button round type="info" native-type="submit">提交</van-button>
                </div>
              </van-form>
          </van-tab>
        </van-tabs>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Sub',
  data () {
    return {
      fileList: [],
      activeName: 1,
      queryInfo: {
        type: '',
        unit: '',
        discribe: '',
        amount: '',
        name: '',
        phone: '',
        state: 1,
        thumb: '',
        user_id: ''
      },
      radio: ''
    }
  },
  created () {
    this.getAuth()
  },
  methods: {
    getAuth () {
      const storeUserId = localStorage.getItem('userId')
      if (this.$route.query.userId || storeUserId) {
        const userId = this.$route.query.userId
        localStorage.setItem('userId', userId)
      } else {
        window.location.href = 'http://www.sxwby.com/home/api/check_auth_two'
      }
    },
    cardValidator (val) {
      return /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(val)
    },
    phoneValidator (val) {
      return /^1[3456789]\d{9}$/.test(val) || /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(val)
    },
    async onSubmit () {
      var qs = require('querystring')
      // const info = Object.assign({}, this.queryInfo)
      // info.thumb = info.thumb.join(',')
      console.log(this.queryInfo)
      const { data: res } = await this.$http.post('api/authenticate_add', qs.stringify(this.queryInfo))
      console.log(res)
      if (res.code !== 200) return this.$Toast(res.msg)
      this.$Dialog.alert({
        message: '提交成功'
      }).then(() => {
        // on close
        // this.$router.push('/')
      })
    },
    onOversize (file) {
      // console.log('文件大小不能超过 5M')
      this.$Toast('文件大小不能超过 5M')
    },
    async afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file, file.content)
      // var qs = require('querystring')
      this.queryInfo.thumb = file.content
      console.log(this.queryInfo)
      // const { data: res } = await this.$http.post('api/upload', { thumb: file.content })
      // console.log(res)
    },
    tabChange (name, title) {
      // console.log('111', name, title)
      this.queryInfo = {
        type: name,
        unit: '',
        discribe: '',
        amount: '',
        name: '',
        phone: '',
        state: 1,
        thumb: '',
        user_id: ''
      }
      this.fileList = []
    },
    radioChange (state) {
      console.log(state)
    }
  }

}
</script>
<style scope>
.sub{padding: 20px 0;background-color: #f5f5f5;}
.select-title{font-size:1em;}
/* .label-width{width:9em;} */
.c-article{text-indent:2em; line-height: 30px;}
.van-checkbox{ height: 45px;line-height: 45px;border-bottom:1px solid #f5f5f5;}
.van-checkbox__icon--checked .van-icon{
      background-color: #761f1c;
    border-color: #761f1c;}
.van-cell {padding: 10px 0; font-size: 0.9em;}
.van-cell::after{left:0;right:0;}
.c-box{background-color: #fff;margin:0 15px;border-radius: 10px;padding:15px 10px;}
.vant-form{background-color: #fff;margin:15px 15px 0;border-radius: 10px;padding:15px 10px;}
.check-box{height: auto;padding:5px 0;}
.my-btn{width:30px;height: 30px;position: absolute;right:20px;top:20px;}
.van-cell:first-child{border-top:1px solid #ebedf0;}
.van-cell:last-child{border-bottom:1px solid #ebedf0;}
.radio-box{margin-top:14px;
}
</style>
